import React, { useState } from 'react'
import { Form, Input, Button, Checkbox, App, Card } from 'antd'
import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'
import { Link, useNavigate } from 'react-router-dom'
import { useAuthStore } from '../services/store'
import SliderCaptcha from '../components/ui/SliderCaptcha'


interface LoginForm {
  username: string
  password: string
  remember: boolean
}

const LoginPage: React.FC = () => {
  const [loading, setLoading] = useState(false)
  const [captchaVerified, setCaptchaVerified] = useState(false)
  const [showCaptcha, setShowCaptcha] = useState(true)

  const navigate = useNavigate()
  const { login } = useAuthStore()
  const { message } = App.useApp()


  const onFinish = async (values: LoginForm) => {
    // 如果验证码未通过，提示用户
    if (!captchaVerified) {
      message.warning('请先完成滑动验证')
      return
    }

    setLoading(true)
    try {
      await login(values.username, values.password)
      message.success('登录成功')
      navigate('/cxggad')
    } catch (error: any) {
      message.error(error.message || '登录失败')
      // 登录失败后重置验证状态
      setCaptchaVerified(false)
      setShowCaptcha(false)
    } finally {
      setLoading(false)
    }
  }

  const handleCaptchaSuccess = () => {
    setCaptchaVerified(true)
    message.success('验证成功，请点击登录按钮')
  }

  const handleCaptchaReset = () => {
    setCaptchaVerified(false)
  }





  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <Card className="shadow-lg">
          {/* Logo和标题 */}
          <div className="text-center mb-6">
            <div className="w-16 h-16 bg-blue-500 rounded-lg mx-auto mb-4 flex items-center justify-center">
              <img 
                src="/logo.png" 
                alt="Logo" 
                className="w-10 h-10 object-contain"
              />
            </div>
            <h1 className="text-2xl font-bold text-gray-800 mb-2">财兴广告后台管理</h1>
            <p className="text-gray-500">请登录您的账户</p>
          </div>

          {/* 登录表单 */}
          <Form
            name="login"
            onFinish={onFinish}
            autoComplete="off"
            size="large"
          >
            <Form.Item
              name="username"
              rules={[
                { required: true, message: '请输入用户名!' },
                { min: 3, message: '用户名至少3个字符!' }
              ]}
            >
              <Input
                prefix={<UserOutlined />}
                placeholder="用户名"
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                { required: true, message: '请输入密码!' },
                { min: 6, message: '密码至少6个字符!' }
              ]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="密码"
                iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
              />
            </Form.Item>

            {/* 滑动验证码 */}
            {showCaptcha && (
              <div className="mb-4">
                <SliderCaptcha
                  onSuccess={() => {
                    setCaptchaVerified(true)
                  }}
                  onReset={() => {
                    setCaptchaVerified(false)
                  }}
                />
              </div>
            )}

            <div className="flex items-center justify-between mb-4">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>
              <Link to="/forgot-password" className="text-blue-500 hover:text-blue-600">
                忘记密码？
              </Link>
            </div>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                className="w-full"
              >
                {loading ? '登录中...' : '登录'}
              </Button>
            </Form.Item>
          </Form>

          {/* 注册链接 */}
          <div className="text-center mt-6 pt-4 border-t border-gray-200">
            <span className="text-gray-500">还没有账户？</span>
            <Link to="/register" className="ml-2 text-blue-500 hover:text-blue-600">
              立即注册
            </Link>
          </div>

          {/* 返回首页 */}
          <div className="text-center mt-4">
            <Link to="/" className="text-gray-400 hover:text-gray-600 text-sm">
              ← 返回首页
            </Link>
          </div>
        </Card>
      </div>
    </div>
  )
}

export default LoginPage